<template>
	<view class="page-body ">
		<web-view :src="html" :webview-styles="webviewStyles" v-if="hasHtml" @message="handleMessage"></web-view>
	</view>
</template>

<script>
	var that;
	import {
	    mapState,
	    mapMutations
	} from 'vuex'	
	import {isPoneAvailable,trim,TimeStorage} from '@/utils/utils.js';
	import {banksList} from '@/common/js/banklist.js';
	import {bankcon} from '@/common/js/bankcon.js'
	import {host} from '@/utils/Config.js';
	var wv;
	export default{
		data(){
			return{
				html:"",
				hasHtml:false,
				webviewStyles:{
					progress:{
						 color: '#FF3333'
					}
				}
			}
		},
		computed:mapState({
			usermobile(state){
				let usermobile = state.usermobile || TimeStorage.geted('mobile') ;
				usermobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
				return usermobile
			}
		}),
		methods:{
			...mapMutations(['changeRefresh']),
			handleMessage(){
				this.changeRefresh(true)
			}
		},
		onLoad(options){
			that=this;
			// #ifdef APP-PLUS
			plus.nativeUI.showWaiting();
			// #endif
			that.html = `${host}/applybindcard?utoken=${TimeStorage.geted('utoken')}`
			that.hasHtml = true;
			
		},
		onShow(options){
			this.changeRefresh(false)
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.nativeUI.closeWaiting();
			// #endif
			// #ifdef APP-PLUS
			var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
			setTimeout(function() {
				wv = currentWebview.children()[0];
				// wv.setCssText('#backURL{display:none;}')
			}, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif
		},
		onUnload(){
		},
		watch: {
		    
		}
	}
</script>

<style lang="scss" scoped="">
	$border-color:#dfdfdf;
	// @import '../../logins/logins.css';
	@import '../../../static/css/user.css';
	.textcode{border-bottom: 1px solid #e9e9e9;height:112upx;}
	.textcode text{font-size: 28upx;width: 180upx;}
	.button{margin-top: 80upx;}
	.tip-p{text-align: center;margin-top:40upx;color: #2462ed;}
	.bankname{font-size: 26upx;color: #535970;height: 0;overflow: hidden;transition: all .3s linear;line-height: 60upx;}
	.bankname image,.bankname .bankimg{width:32upx ;height:32upx ;margin-right: 8upx;}
	.bankname .bankimg{background: url(/static/img/bank/bankcon.png) no-repeat 0px 0px/100% auto;}
	.bankname.slideup{height: 60upx;padding-top:10upx; }
	.warn{border-bottom-color:#ff6361; }
	.warntip{color: #ff6361;font-size: 24upx;line-height: 70upx;height: 70upx;transition: height .3s linear;overflow: hidden;}
	.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			padding:0 20upx 30upx;
			overflow: hidden;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 32upx;text-align: center;font-weight: bold;}
		.p{font-size: 24upx;color: #b8becc;line-height: 32upx;padding-top: 10upx;}
		.btn{width: 320upx;height: 60upx;border-radius: 30upx;line-height: 60upx;background:linear-gradient( 0deg, rgb(255,114,1) 0%, rgb(255,129,27) 100%);color: #fff;text-align: center;margin: 0 auto;margin-top:30upx; }
		.bankstate{
			padding: 0 0 30upx;
			.li-bank{border-bottom: 1px solid #eee;height: 100upx;}
			.img{width: 100upx;height: 50upx;background: url(/static/img/bank/bankcon.png) no-repeat center 0/50% auto;}
			.li-bank:nth-of-type(1) .img{background-position:center 0; }
			.li-bank:nth-of-type(2) .img{background-position:center -84upx; }
			.li-bank:nth-of-type(3) .img{background-position:center -170upx; }
			.li-bank:nth-of-type(4) .img{background-position:center -252upx; }
			.li-bank:nth-of-type(5) .img{background-position:center -340upx; }
			.li-bank:nth-of-type(6) .img{background-position:center -422upx; }
			.li-bank:nth-of-type(7) .img{background-position:center -496upx; }
			.li-bank:nth-of-type(8) .img{background-position:center -588upx; }
			.li-bank:nth-of-type(9) .img{background-position:center -670upx; }
			.li-bank:nth-of-type(10) .img{background-position:center -770upx; }
			.li-bank:nth-of-type(11) .img{background-position:center -863upx; }
			.li-bank:nth-of-type(12) .img{background-position:center -960upx; }
			.li-bank:nth-of-type(13) .img{background-position:center -1059upx; }
			.li-bank:nth-of-type(14) .img{background-position:center -1159upx; }
		}
		
	}
	.state2{
		.cont{
			padding: 0;
			text-align: center;
		}
		.p{
			color: #a9b0c0;font-size: 26upx;line-height:40upx;padding: 0 20upx;
			.bn{color: #666d83;font-weight: bold;padding: 0 4upx;}
			text:nth-of-type(2){color: #2462ed;}
		}
		.btn-row-more{
			padding: 0;border-top: 1px solid $border-color; margin-top:35upx; 
			.btn{height: 88upx;line-height: 88upx;text-align: center;color: #a9b0c0;background: #fff;border-radius: 0;margin-top:0; }
			.btn:nth-of-type(1){border-right: 1px solid $border-color;color: #a9b0c0;}
		}
	}
	.state.fadein{
		opacity: 1;z-index: 10;
	}
</style>
